import _ from 'lodash';
import {
  View,
  Text,
  Image,
  Colors,
  Constants,
  Avatar,
  GridView,
  Card,
  GridViewProps,
  Button, 
} from 'react-native-ui-lib';
import React, {Component} from 'react';
import {Alert, ScrollView, StyleSheet} from 'react-native';
import conversations from '../../data/conversations';
import products from '../../data/products';
import {TestCase, TestSuite} from '@rnoh/testerino';
import Orientation from 'react-native-orientation-locker';

class GridViewScreen extends Component {
  state = {
    contacts: _.flow(
      conversations => _.take(conversations, 15),
      (contacts: any[]) =>
        _.map(contacts, contact => ({
          imageProps: {
            source: {uri: contact.thumbnail},
            borderRadius: 999,
            style: {backgroundColor: Colors.grey60},
          },
          title: _.split(contact.name, ' ')[0],
          titleLines: 1,
          onPress: () => Alert.alert('My name is ' + contact.name),
        })),
    )(conversations),
    
    products: _.flow(
      products => _.take(products, 8),
      (products: any[]) =>
        _.map(products, (product, index) => ({
          imageProps: {
            source: {uri: product.mediaUrl},
            borderRadius: 4,
            style: {
              backgroundColor: Colors.grey60,
              borderWidth: 1,
              borderColor: Colors.grey50,
            },
          },
          title: product.name,
          titleTypography: 'subtextBold',
          onPress: () => Alert.alert('My price is ' + product.formattedPrice),
        })),
    )(products) as GridViewProps['items'],

    squares: [
      Colors.red30,
      Colors.yellow30,
      Colors.blue30,
      Colors.violet30,
      Colors.green30,
      Colors.cyan30,
    ].map(color => ({
      renderCustomItem: () => <View height={50} width={'100%'} backgroundColor={color} />,
      onPress: () => Alert.alert('Color: ' + color),
    })),
    orientation: Constants.orientation,
  };

  onLayout = () => {
    if (this.state.orientation !== Constants.orientation) {
      this.setState({
        orientation: Constants.orientation,
      });
    }
  };

  render() {
    const {contacts, products, squares} = this.state;

    return (
      <TestSuite name="GridViewPropsDemo">
        <ScrollView onLayout={this.onLayout}>
          
          <TestCase itShould="numColumns=3: 强制显示为3列">
            <GridView
              items={products}
              numColumns={3} 
            />
          </TestCase>


          <TestCase itShould="numColumns=2: 强制显示为2列">
            <GridView
              items={products}
              numColumns={2} 
            />
          </TestCase>

          <TestCase itShould="itemSpacing=20: 项目之间有20px间距">
            <View style={{backgroundColor: Colors.grey80}}>
              <GridView
                items={squares}
                numColumns={3}
                itemSpacing={20}
              />
            </View>
          </TestCase>

          <TestCase itShould="itemSpacing=10: 项目之间有10px间距">
            <View style={{backgroundColor: Colors.grey80}}>
              <GridView
                items={squares}
                numColumns={3}
                itemSpacing={10}
              />
            </View>
          </TestCase>

          <TestCase itShould="viewWidth=200: 强制网格容器宽度为200 (右侧留白)">
             <View style={{borderWidth: 1, borderColor: 'red'}}>
               <Text text90 grey40>Red Border represents parent container</Text>
               <View style={{backgroundColor: Colors.grey70}}>
                  <GridView
                    items={products}
                    numColumns={2}
                    viewWidth={200}
                  />
               </View>
             </View>
          </TestCase>

          <TestCase itShould="viewWidth=250: 强制网格容器宽度为250 (右侧留白)">
             <View style={{borderWidth: 1, borderColor: 'red'}}>
               <Text text90 grey40>Red Border represents parent container</Text>
               <View style={{backgroundColor: Colors.grey70}}>
                  <GridView
                    items={products}
                    numColumns={2}
                    viewWidth={250}
                  />
               </View>
             </View>
          </TestCase>

          <TestCase itShould="lastItemLabel='+9' & OverlayColor=Blue: 最后一个显示自定义遮罩">
            <GridView
              items={contacts}
              viewWidth={300}
              numColumns={5} 
              lastItemOverlayColor={Colors.blue30}
              lastItemLabel={"+9"} 
            />
          </TestCase>

          <TestCase itShould="lastItemLabel='+8' & OverlayColor=red: 最后一个显示自定义遮罩">
            <GridView
              items={contacts}
              viewWidth={300}
              numColumns={5} 
              lastItemOverlayColor={Colors.red30}
              lastItemLabel={"+8"} 
            />
          </TestCase>

          <View style={{padding: 10, backgroundColor: Colors.grey80, marginBottom: 10}}>
            <Text text80 style={{marginBottom: 10}}>Orientation Control:</Text>
            <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
              <Button 
                label="Force Portrait" 
                size={Button.sizes.small}
                onPress={() => Orientation.lockToPortrait()} 
              />
              <Button 
                label="Force Landscape" 
                size={Button.sizes.small}
                backgroundColor={Colors.orange30}
                onPress={() => Orientation.lockToLandscape()} 
              />
            </View>
          </View>

          <TestCase itShould="keepItemSize=true: 旋转屏幕或宽度变化时保持Item尺寸不变(列数自动计算)">
             <GridView
               items={products}
               keepItemSize={true}
             />
          </TestCase>

          <TestCase itShould="renderCustomItem: 使用自定义渲染函数(渲染色块而非图片)">
            <GridView
              items={squares} 
              numColumns={3}
              itemSpacing={10}
            />
          </TestCase>

        </ScrollView>
      </TestSuite>
    );
  }
}

export default GridViewScreen;